<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!-- 挂载容器-->
<div id="app">
    <h1>{{ msg }}</h1>
    <h1>{{msg?"abc":"xyz"}}</h1>
    <h1>{{NaN?"abc":"xyz"}}</h1>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
<!--    渲染属性 v-bind:属性名="username"-->
    <input type="text" v-bind:value="username">
    <input type="button" value="点击" @:click="test">

</div>
<h1>{{ msg }}</h1>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
<script>
    let vue = Vue.createApp({
        // 在setup内部自由声明数据和方法即可!最终返回!
        setup() {
            //js 中所有的数据类型都可以转换为布尔类型进行判断
            // null , undefined , "" , 0 , NaN 都是false 其余都是true
            let msg = "hello,vue3";
            let username = "admin";
            let test = () => {
                alert("你好 ， vue3")
            }
            return {
                msg
                , username
                , test
            }
        }
    });
    //将vue对象挂载到指定标签上 ， 此时只有在标签中才能够访问vue中的数据
    vue.mount("#app");
</script>
</body>
</html>